<template>
  <!-- 外出救援-经销商端页面 -->
  <div>
    <TopFilter :list="topFilterList" :cols="3" labelWidth="85" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <FilterTable
      ref="table"
      columnsRef="repair-labourHour-index"
      :isSelectColumn="false"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectData"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </template>
    </FilterTable>

    <!--抽屉 -->
    <Drawer :visible.sync="actions.visible" :title="actions.title" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addDialog :type="actions.type" :row="formData" @close="close" />
    </Drawer>
    <!-- <Drawer :visible.sync="actions.visible" :title="action.stitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <editDialog :type="actions.type" :row="formData" @close="close" />
    </Drawer> -->
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import dictCode from '@/utils/dictCode';
import { getRescueList, getResultList } from '@/api/repair/repairBusiness/rescueService/index.js';
// import editDialog from '@/pages/repair/repairBusiness/rescueService/editDialog.vue';
import addDialog from './addDialog';

// 延保订单查询
export default {
  name: 'rescue-editDialog',
  components: { addDialog },
  mixins: [dictionary],
  data() {
    this.allSeries = {};
    return {
      fetchParams: { xhrAbort: false },
      fetchApi: getRescueList,
      columns: this.createTableColumns(),
      formData: {},
      tableData: [],
      topFilterList: this.createTopFilterList(),
      actions: { type: 'add', title: '', visible: false, data: null }
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '救援单编号',
          fieldName: 'serviceNo',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '单据状态',
          fieldName: 'status',
          placeholder: '请输入...',
          itemList: this.createDictList('9995').filter(x => x.value === 99951001 || x.value === 99951003) // 已保存，已驳回
        },
        {
          type: 'RANGE_DATE',
          label: '创建日期',
          style: { minWidth: '220px' },
          fieldName: 'createdAtBegin|createdAtEnd'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '救援地址',
          fieldName: 'rescueAddr',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '救援方式',
          fieldName: 'rescueType',
          placeholder: '请选择...',
          itemList: this.createDictList('9997')
        },
        {
          type: 'INPUT',
          label: '救援单号',
          fieldName: 'rescueNo',
          placeholder: '请输入...'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          minWidth: '100',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.emitFun(props.row, 'show')}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        {
          title: '单据状态',
          dataIndex: 'status',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.status, '9995')}</span>;
          }
        },
        {
          title: '救援单编号',
          dataIndex: 'serviceNo',
          sorter: true
        },
        {
          title: '救援时间',
          dataIndex: 'begDate',
          sorter: true,
          width: 150,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true
        },
        {
          title: '救援方式',
          dataIndex: 'rescueType',
          sorter: true,
          dictItems: this.createDictList('9997')
        },
        {
          title: '救援单号',
          dataIndex: 'rescueNo',
          sorter: true
        },
        {
          title: '救援地址',
          dataIndex: 'rescueAddr',
          sorter: true
        }
      ];
    },
    // 编辑
    async emitFun(val, type) {
      let res = await getResultList({ rescueNo: val.rescueNo, ownerCode: val.ownerCode });
      if (res.resultCode == 200) {
        val.url = res.data.rows[0].url;
        this.formData = val;
        this.actions = { type: 'edit', visible: true, title: '外出救援' };
      }
    },

    // 新建
    add() {
      this.actions = { type: 'add', visible: true, title: '外出救援' };
    },
    selectData(val) {
      this.tableData = val;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    close(val, type) {
      // 关闭
      this.actions.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
